<template>
  <div id="FinancialMaintenance">
    <div class="query">
      <!-- --------------- -->
      <div class="homeTitle admin">
        <span>理财产品资料维护</span>
        <el-input placeholder="搜索产品代码\产品名称" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
      </div>
      <div class="queryCon">
        <div class="qSeles">
          <!-- 两个选择 -->
          <div class="xuanze">
            <div class="xuanzeCon">
              <span>产品类型：</span>
              <el-select v-model="cplx" placeholder="请选择" size="small">
                <el-option
                  v-for="item in cplxOptin"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>风险评级：</span>
              <el-select v-model="fxpj" placeholder="请选择" size="small">
                <el-option
                  v-for="item in fxpjOptin"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>收益方式：</span>
              <el-select v-model="syfs" placeholder="请选择" size="small">
                <el-option
                  v-for="item in syfsOption"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnAb">
            <el-button type="primary"  size="small" @click="getdata(1)">查询</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="code" label="产品代码" align="center"></el-table-column>
          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="type" label="产品类型" align="center"></el-table-column>
          <el-table-column prop="riskRating" label="风险评级" align="center"></el-table-column>
          <el-table-column prop="incomeMethod" label="收益方式" align="center"></el-table-column>
          <el-table-column prop="issuerName" label="发行机构名称" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="selected(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
     <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FinancialMaintenance",
  data() {
    return {
      cplx: '',
      cplxOptin: ['保本','非保本'],
      fxpj: '',
      fxpjOptin: ['PR1','PR2','PR3','PR4','PR5'],
      syfs: '',
      syfsOption: ['保证收益型','非保证收益型'],
      search: "",
      tableData: [],
      // 分页
      currentPage: 1,
      total: null
    };
  },
  mounted () {
    this.getdata(1);
  },
  methods: {
    getdata (val) {
      this.currentPage = val;
      let obj= {
        codeOrType: this.search,
        type: this.cplx,
        riskRating: this.fxpj,
        incomeMethod: this.syfs,
        page: this.currentPage
      }
      this.axios.get('financialProducts/findAllByName',{params:this.filterNoneObj(obj)})
        .then(({data}) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
          }
        })
    },
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
    selected(row) {
      //选中
       sessionStorage.setItem('productId', row.id)
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="scss">
#FinancialMaintenance {
  .homeTitle {
    &.admin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid black;
      .el-input {
        width: 300px;
      }
    }
  }
  .queryCon {
    background: white;
    padding: 0 20px 20px;
    .qSeles {
      padding-top: 20px;
      .xuanze {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        .xuanzeCon {
          height: 40px;
          display: flex;
          align-items: center;
          margin-right: 30px;
          .el-input {
            width: 200px;
          }
        }
      }
      .btnAb {
        margin-top: 30px;
        .el-button {
          margin-right: 30px;
        }
      }
    }
  }
  .table {
    background: white;
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
